<template>
  <van-popup :value="value" @input="$emit('input',$event)" @open="isReport=false">
    <van-cell-group v-if="!isReport">
      <van-cell @click="disLike" icon="closed-eye">不感兴趣</van-cell>
      <van-cell is-link @click="isReport=true">反馈垃圾内容</van-cell>
      <van-cell icon="info-o">拉黑作者</van-cell>
    </van-cell-group>
    <van-cell-group v-else>
      <van-cell icon="arrow-left" @click="isReport=false">返回</van-cell>
      <van-cell v-for="report in reports" :key="report.value" @click="reportArt(report.value)"> {{report.label}} </van-cell>
    </van-cell-group>
  </van-popup>
</template>

<script>
import { disLikeById, reportById } from '@/api/article.js'
import { reports } from '@/api/constants' // 举报内容
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    articleId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      // 是否显示上报垃圾内容
      isReport: false,
      reports
    }
  },
  methods: {
    // 举报搞颜色
    async reportArt (val) {
      try {
        await reportById(this.articleId, val)
        this.$toast.success('操作成功')
        this.$emit('on-report')
        this.$emit('input', false)
      } catch (error) {
        this.$toast.fail('操作失败')
      }
    },
    async disLike () {
      try {
        // 后台接口不感兴趣
        await disLikeById(this.articleId)
        this.$toast.success('操作成功')
        // 触发自定义事件
        this.$emit('on-disLibke')
        // 关闭弹出层
        this.$emit('input', false)
      } catch (error) {
        console.log(error)
        this.$toast.fail('操作失败')
      }
    }
  }

}
</script>

<style lang="less" scoped>
.van-popup {
  width: 80%;
  border-radius: 4px;
}
</style>
